<template>
  <div class="set-tranfer-number">
    <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:100px' }" :wrapper-col="{ style: 'calc(100% - 100px)' }">
      <!-- 下拉框 -->
      <a-form-item label="选择模版" name="id" :rules="[{ required: true, message: '请选择模版!' }]">
        <a-select v-model:value="formState.id" placeholder="请选择" :options="templateOptions" showSearch @change="changeTemplate"> </a-select>
      </a-form-item>

      <a-form-item label="导出文件名称" name="exportFileName">
        <span style="font-size: 20px; font-weight: 600">{{ formState.exportFileName }}</span>
      </a-form-item>

      <a-form-item label="导出内容">
        <div style="height: 500px; overflow-y: scroll">
          <a-list size="small" bordered :data-source="formState.fieldNames">
            <template #renderItem="{ item }">
              <a-list-item>{{ item }}</a-list-item>
            </template>
          </a-list>
        </div>
      </a-form-item>
    </a-form>

    <div class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>导 出</a-button>
      <a-button @click="resetForm">取 消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: Base.GeneraDataType;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type } = toRefs(props);
const { formState, loading, formRef, templateOptions, getData, getDataValue } = InitHook();
const { onSubmit, resetForm, changeTemplate } = OperationHook({
  visible,
  passData,
  formState,
  loading,
  formRef,
  emit,
  templateOptions,
  getDataValue,
  type
});

watch(
  () => visible.value,
  v => {
    if (v) {
      getData();
    } else {
      resetForm();
    }
  }
);

// init();
getData();
</script>
<style lang="stylus" scoped>
.set-tranfer-number {
  background-color: #fff;

  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
